<script setup>
// computed 的使用
import { computed, ref } from 'vue';

const newValue = computed(() => {
  // 做运算计算出新的值
  return 100;
});

// 组件本身的响应式数据
const scores = ref([90, 100, 70, 59]);

// 基于已有的数据计算新的属性
const goods = computed(() => {
  // 计算了
  let results = scores.value.filter((item) => item > 80);
  return results;
});
</script>

<template>
  <h2>我是一个计算属性{{ newValue }}</h2>
  <h2>组件本身数据：{{ scores }}</h2>
  <!-- <button @click="scores.push(70 + Math.floor(Math.random() * 25))">改</button> -->
  <button @click="scores.push(Math.floor(Math.random() * (90 - 70) + 70))">
    改
  </button>

  <h2>基于上面数据计算的新数据：{{ goods }}</h2>
</template>

<style scoped></style>
